<template>
  <div class="page-container">
    <div class="page-content">
      <!--搜索-->
      <div class="panel-container">
        <searchuinew :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording"></searchuinew>
      </div>
      <!--数据信息-->
      <div class="panel-container no-margin">
        <div class="panel-line flex-end" style="margin-bottom: 10px" @click="handleAdd">
          <el-button size="mini" type="primary"> + 新增 </el-button>
        </div>
        <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading">
          <el-table-column align="center" header-align="center" label="序号" type="index" width="50"></el-table-column>
          <el-table-column align="center" header-align="center" label="封面">
            <template slot-scope="scope">
              <div class="img-box">
                <img :src="scope.row.img_url" class="img" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" label="模板名称">
            <template slot-scope="scope">
              <div class="text-box">
                <p>模板名称:{{ scope.row.temp_title }}</p>
                <p>尺寸:{{ scope.row.width }}x{{ scope.row.height }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleCopy(scope)">复制</el-button>
              <el-button size="mini" type="text" @click="handleEdit(scope)">编辑</el-button>
              <el-button size="mini" type="text" class="text-danger" @click="handleDelete(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          :current-page="pageIndex"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalPage"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { apiTempList, apiTempDel } from '@/api/adManage'
import { formatFormData } from '@/utils'

export default {
  name: 'index',
  components: {},
  data() {
    return {
      showSaveTemplate: true,
      searchFormArr: [
        {
          fieldName: '模板名称:',
          type: 'input',
          field: 'temp_title',
          placeholder: '请输入模板名称',
        },
        {
          fieldName: '尺寸:',
          type: 'input',
          NameType: 'Number',
          field: 'size',
          placeholder: '请输入尺寸',
        },
      ],
      isAccording: true,
      searchParams: {
        temp_title: '',
        size: '',
      },

      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchParams)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiTempList(formData)
        .then((res) => {
          const { items, total } = res.result
          this.dataList = items
          this.totalPage = total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    // 列表查询
    searchParma(e) {
      this.searchFormArr.forEach((item) => {
        if (item.field === 'time') return
        if (e[item.field]) {
          this.searchParams[item.field] = e[item.field]
        } else {
          this.searchParams[item.field] = ''
        }
      })
      this.pageIndex = 1
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 删除
    handleDelete(scope) {
      this.$confirm('确定要删除这个模板？').then(() => {
        apiTempDel(formatFormData({ ids: [scope.row.id] })).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success',
          })
          this.getDataList()
        })
      })
    },
    // 新增
    handleAdd() {
      this.$router.push({
        name: 'CreateAdImg',
      })
    },
    // 编辑
    handleEdit(scope) {
      this.$router.push({
        name: 'CreateAdImg',
        query: { id: scope.row.id, editMode: 'edit' },
      })
    },
    // 复制
    handleCopy(scope) {
      this.$router.push({
        name: 'CreateAdImg',
        query: { id: scope.row.id, editMode: 'copy' },
      })
    },
  },
}
</script>

<style scoped lang="scss">
.img-box {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  .img {
    max-width: 100%;
    max-height: 100%;
  }
}
.text-box {
  text-align: left;
}
</style>
